<template>
    <div>
        <h1>App</h1>
        <!-- http://localhost:8080/#Home -->
        <ul>
            <li> <a href="#Home">Home</a> </li>
            <!-- http://localhost:8080/#/a/b/c -->
            <li> <a href="#/a/b/c">Shop</a> </li>
            <li> <a href="#/abc">Cart</a> </li>
        </ul>
        <component :is="comName"></component>
    </div>
</template>
<script>
/*
根据地址栏的hash值切换组件
#home => comName:Home
#a => comName:Cart
#abc => comName:Shop
#/a/b/c => comName:Shop

1. 获取地址栏的hash值
2. 根据hash的变化动态的获取最新hash值
3. hash值映射组件，最后在页面中显示映射的组件内容

*/

export default {
    data() {
        return {
            comName: 'Home'
        }
    },

    created() {
        // 路由
        const routes = {
            '#Home': 'Home',
            '#/a/b/c': 'Shop',
            '#/abc': 'Cart',
        }
        window.onhashchange = () => {
            if (routes[location.hash] !== undefined) {
                this.comName = routes[location.hash];
            }
        }
    }



}
</script>
<style>
div {
    border: solid;
    padding: 10px;
}
</style>